//1. 导入 createSlice 函数
import {createSlice} from '@reduxjs/toolkit'

//2. 创建 slice 切片对象
let slice = createSlice({
  //状态的名称
  name: 'user',
  //状态的初始值
  initialState: [
    '张三',
    '李四',
    '王五'
  ], 
  //定义 reducer 内部的功能
  reducers: {
    //新增操作
    add: (state, {type, payload}) => {
      //直接对原始状态进行修改, 完成更新
      state.push(payload);
    },
    //移除用户
    remove: (state, {type, payload}) => {
      //通过条件查找元素在数组中的下标
      let index = state.findIndex(item => item === payload);
      //删除数组中的某个元素
      state.splice(index, 1);
    }
  }
});

// store.dispatch(add('张三')); // {type: 'user/add', payload: '张三'}
// store.dispatch(remove('张三')); // {type: 'user/remove', payload: '张三'}

//3. 通过切片对象, 获得同步的 action creator     () => {  return {type: 'incre', payload: 100}  }   
export let {add, remove} = slice.actions; 

//4. 通过切片对象, 获得当前状态的 reducer 函数
let reducer = slice.reducer;

//声明异步的 action creator
export function asyncAdd(payload){
  return dispatch => {
    setTimeout(() => {
      dispatch(add(payload));
    }, 1000)
  }
}

//暴露 reducer 函数
export default reducer;